<script setup lang="ts">
import { onBeforeUnmount, onMounted, onUpdated, ref } from "vue"
import DrawingData from "./components/drawingData.vue"
import DrawingDesc from "./components/drawingDesc.vue"
import DrawingPlaza from "./components/drawingPlaza.vue"
// @ts-ignore
import Pubsub from "pubsub-js"

const loading = ref<boolean>(false)

const watchPubsub = () => {
  Pubsub.subscribe("UPDATE-DRAWING", () => {
    loading.value = true

    setTimeout(() => {
      loading.value = false
    }, 1000)
  })
}

onMounted(watchPubsub)

onUpdated(watchPubsub)

onBeforeUnmount(() => {
  Pubsub.unsubscribe("UPDATE-DRAWING")
})
</script>

<template>
  <el-row :gutter="20" v-loading="loading">
    <el-col :xs="24" :sm="8">
      <el-card class="box-card">
        <DrawingDesc />
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="8">
      <el-card class="box-card">
        <DrawingPlaza />
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="8">
      <el-card class="box-card">
        <DrawingData />
      </el-card>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.box-card {
  height: calc(100vh - 120px);
  position: relative;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    width: 0;
  }
}

::v-deep .el-card__body {
  width: 100%;
  height: 100%;
}
</style>
